<!DOCTYPE html>
<html lang="en">
<!--测试-->
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>奖项设置</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/polyfill.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/index.js"></script>
		<script src="js/member.js"></script>
		<style>
			.el-input {
				width: 120px;
			}

			.el-table {
				margin-bottom: 10px;
			}

			* {
				cursor: initial;
			}

			.awards,
			.members {
				width: 80%;
				margin: auto;
				margin-top: 50px;
			}

			h1 {
				font-size: 30px;
				text-align: center;
				line-height: 1.5;
				margin-bottom: 20px;
			}

			h1 span {
				font-size: 16px;
			}

			a {
				text-decoration: underline;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<script>
			with(document) with(body) with(insertBefore(createElement("script"), firstChild)) setAttribute("exparams",
				"category=&userid=&aplus&yunid=&&trid=ac11000117363312540938663e3e89&asid=AQAAAAD2T35nOJXIVwAAAABmZ8V/MBKItw==",
				id = "tb-beacon-aplus", src = (location > "https" ? "//g" : "//g") + ".alicdn.com/alilog/mlog/aplus_v2.js")
		</script>

		<script>
			with(document) with(body) with(insertBefore(createElement("script"), firstChild)) setAttribute("exparams",
				"category=&userid=&aplus&yunid=&&trid=ac11000117060855348433796e6e5d&asid=AQAAAACezLBloBQgHQAAAAD5U9jM6S7PGQ==",
				id = "tb-beacon-aplus", src = (location > "https" ? "//g" : "//g") + ".alicdn.com/alilog/mlog/aplus_v2.js")
		</script>

		<script>
			with(document) with(body) with(insertBefore(createElement("script"), firstChild)) setAttribute("exparams",
				"category=&userid=&aplus&yunid=&&trid=2760820916892109798588126ef279&asid=AQAAAABjUK9kd+9JWAAAAACj5wfYcwFz5A==",
				id = "tb-beacon-aplus", src = (location > "https" ? "//g" : "//g") + ".alicdn.com/alilog/mlog/aplus_v2.js")
		</script>

		<div id="app">
			<div class="awards">
				<!-- <h1>奖项设置 <span>（请按抽奖顺序添加）</span></h1> -->
				<h1>奖品列表</h1>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column :prop="item.prop" :label="item.label" width="180" v-for="(item, index) in columns"
						:key="index">
						<template slot-scope="scope">
							<div>
								{{scope.row[item.prop]}}
								<!-- 奖项设置——可更改 -->
								<!-- <div v-if="scope.row.editing[item.prop]">
                                <el-input size="mini" v-model="scope.row[item.prop]"
                                    @blur="onSaveCell(scope.row, item.prop)">
                                </el-input>
                            </div>
                            <div v-else @dblclick="onEditCell(scope.row, item.prop, $event)">
                                {{ scope.row[item.prop] || '(请填写)' }}
                            </div> -->
							</div>
						</template>
					</el-table-column>
					<!-- 奖项设置 -->
					<!-- <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" @click="onAdd(scope.row, scope.$index)" type="primary">
                            增加
                        </el-button>
                        <el-button size="small" @click="onRemove(scope.row, scope.$index)" type="danger">
                            删除
                        </el-button>
                    </template>
                </el-table-column> -->
				</el-table>
				<el-button size="small" type="primary" @click="onAdd(null, -1)" v-show="tableData.length===0">增加
				</el-button>
				<span>
					每个奖项每次抽取人数：<span style="margin-right: 20px;">{{batchNumber}}</span>
				</span>
				<!-- 设置抽奖人数  :disabled="true"-->
				<el-select size="small" v-model="batchNumber" @change="onChange">
					<el-option v-for="index in 20" :key="index" :label="index" :value="index">
					</el-option>
				</el-select>
				<el-button size="small" type="danger" @click="onReset">
					重置中奖结果
				</el-button>
				<div>

					<a href="./index.html">
						<button style="width: 100px;height: 50px;">去抽奖</button>
					</a>
				</div>

			</div>
			<div class="members">
				<h1>参与人员列表(共{{memberSource.length}}人)</h1>
				<el-table :data="memberSource" style="width: 100%" stripe>
					<el-table-column :prop="item.prop" :label="item.label" width="180"
						v-for="(item, index) in memberColumns" :key="index">
						<template slot-scope="scope">
							<div>
								<div v-if="scope.row.editing[item.prop]">
									<el-input size="mini" v-model="scope.row[item.prop]"
										@blur="onSaveCell(scope.row, item.prop)"></el-input>
								</div>
								<div v-else @dblclick="onEditCell(scope.row, item.prop, $event)">
									{{ scope.row[item.prop] || '(请填写)' }}
								</div>
							</div>
						</template>
					</el-table-column>
					<!-- 人员设置 -->
					<!-- <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" @click="onRemoveMember(scope.row, scope.$index)" type="danger">
                            删除
                        </el-button>

                    </template>
                </el-table-column> -->
				</el-table>
				<!-- 人员设置 -->
				<!-- <el-button size="small" @click="onAddMember" type="primary">
                增加
            </el-button>
            <el-button size="small" type="warning" @click="onImport">重置</el-button> -->
			</div>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					dialogVisible: false,
					batchNumber: 1,
					columns: [{
						prop: 'name',
						label: '名称',
					}, {
						prop: 'count',
						label: '数量',
					}, {
						prop: 'award',
						label: '奖品',
					}, ],
					memberColumns: [{
						prop: 'name',
						label: '姓名',
					}, {
						prop: 'id',
						label: '工号',
					}, ],
					tableData: [{
						name: '特等奖',
						count: 1,
						editing: {},
					}, {
						name: '一等奖',
						count: 1,
						editing: {},
					}, ],
					memberSource: [],
				},
				computed: {
					awards: function() {
						let res = this.tableData
							.filter(function(item) {
								return item.name && item.count;
							})
							.map(function(item) {
								return {
									name: item.name,
									count: item.count,
									award: item.award,
								};
							});
						// console.log(res);
						return res;
					},
					members: function() {
						return this.memberSource
							.filter(function(item) {
								return item.name && item.id;
							})
							.map(function(item) {
								return {
									name: item.name,
									id: item.id,
								};
							});
					},
				},
				methods: {
					onReset: function() {
						var vm = this;
						this.$confirm(
							'重置会清空所有抽奖结果，无法撤销！',
							'确定要重置吗？', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
							}
						).then(function() {
							localStorage.removeItem('players');
							localStorage.removeItem('result');
						});
					},
					onChange: function(value) {
						console.log(value);
						localStorage.setItem('batchNumber', value);
					},
					onSaveCell: function(row, key) {
						this.$set(row.editing, key, false);
						this.saveData();
					},
					onEditCell: function(row, key, e) {
						this.$set(row.editing, key, true);
						const parent = e.target.parentNode;
						this.$nextTick(function() {
							// console.log(parent.innerHTML, row)
							parent.querySelector('input').focus();
						});
					},
					onAdd: function(row, index) {
						console.log(row, index);
						this.tableData.splice(index + 1, 0, {
							editing: {
								name: true,
							},
						});
					},
					onRemove: function(row, index) {
						this.tableData.splice(index, 1);
						this.saveData();
					},
					onAddMember: function() {
						this.memberSource.push({
							editing: {
								name: true,
							},
						});
					},
					onRemoveMember: function(row, index) {
						var vm = this;
						this.$confirm('删除不可撤销！可重新添加', '确定删除吗？', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
						}).then(function() {
							vm.memberSource.splice(index, 1);
							vm.saveData();
						});
					},
					onImport: function() {
						var vm = this;
						this.$confirm('重新导入会覆盖现有人员列表', '确定重置吗？', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
						}).then(function() {
							vm.memberSource = window.members.map(function(item) {
								return {
									name: item.name,
									id: item.id,
									editing: {},
								};
							});
							vm.saveData();
						});
					},
					saveData: function() {
						localStorage.setItem('awards', JSON.stringify(this.awards));
						localStorage.setItem('members', JSON.stringify(this.members));
						// console.log("存的什么 ??????????????");
						// console.log(this.members);
						localStorage.setItem(
							'batchNumber',
							JSON.stringify(this.batchNumber)
						);
					},
					getAwards: function() {
						let url = 'https://www.tcwang.cc:7000/user/activity/getPrizeList'
						// let url = 'http://192.168.110.102:7000/user/activity/getPrizeList'
						axios.get(url).then((response) => {
							let awards = response.data.data;
							this.tableData = awards.map(function(item) {
								return {
									name: item.name,
									count: item.count,
									award: item.award,
									editing: {},
								};
							});
							this.saveData();
						}).catch(err => {
							console.log(err, "奖品获取失败！====================");
						})
					},
					getMembers() {
						// 参与人员
						let url = 'https://www.tcwang.cc:7000/user/user/getRegistrationList'
						// let url = 'http://192.168.110.102:7000/user/user/getRegistrationList'
						axios.get(url).then((response) => {
							console.log('response', response);
							var members = response.data.data
							this.batchNumber = +localStorage.getItem('batchNumber') || 1;
							this.memberSource = members.map(function(item) {
								return {
									name: item.name,
									id: item.id,
									editing: {},
								};
							});
							this.getAwards()
						})
					}
				},
				created: function() {
					localStorage.removeItem('players');
					localStorage.removeItem('result');
					this.getMembers()
				},
			});
		</script>
	</body>

</html>